<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统 - 地图模块</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <!-- 百度地图API -->
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=daT3tHAVNyA1gZdLTsXWf74zXiiOFqKi"></script>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#1e40af', // 深蓝色主色调
            secondary: '#3b82f6', // 中蓝色辅助色
            accent: '#bfdbfe', // 浅蓝色强调色
            neutral: '#f1f5f9', // 浅灰色背景
            dark: '#0f172a', // 深灰色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .map-container {
        height: 100vh;
      }
      .sidebar-height {
        height: 100vh;
      }
    }
  </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <!-- 主内容区 -->
  <main class="flex flex-col md:flex-row">
    <!-- 左侧筛选面板 -->
    <aside class="bg-white shadow-md w-full md:w-80 sidebar-height overflow-y-auto scrollbar-hide transition-all duration-300 transform md:translate-x-0" id="sidebar">
      <div class="p-4">
        <div class="mb-4">
          <h2 class="text-lg font-bold mb-3 flex items-center">
            <i class="fa fa-filter mr-2 text-primary"></i>筛选条件
          </h2>
          
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">位置类型</label>
              <div class="space-y-2">
                <label class="flex items-center">
                  <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                  <span class="ml-2 text-sm">图书馆</span>
                </label>
                <label class="flex items-center">
                  <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                  <span class="ml-2 text-sm">书店</span>
                </label>
                <label class="flex items-center">
                  <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                  <span class="ml-2 text-sm">阅读角</span>
                </label>
                <label class="flex items-center">
                  <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                  <span class="ml-2 text-sm">自助借还点</span>
                </label>
              </div>
            </div>
            
            <!-- 移除藏书量滑块 -->
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">开放时间</label>
              <select class="form-select block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring focus:ring-primary/20 focus:ring-opacity-50">
                <option value="">全部</option>
                <option value="24h">24小时开放</option>
                <option value="morning">上午开放</option>
                <option value="afternoon">下午开放</option>
                <option value="evening">晚上开放</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </aside>
    <section class="flex-1 relative">
      <div class="absolute top-4 right-4 z-40">
        <button class="bg-white shadow-md rounded-md p-2 hover:bg-gray-50 transition-colors" id="toggle-sidebar">
          <i class="fa fa-bars text-primary"></i>
        </button>
      </div>
      
      <div id="map" class="map-container w-full"></div>

      <div class="absolute bottom-4 left-4 right-4 md:left-4 md:right-auto md:w-96 bg-white rounded-lg shadow-lg overflow-hidden transition-all duration-300 transform scale-100 opacity-100 hidden" id="location-info">
        <div class="p-4 border-b border-gray-200 flex justify-between items-center">
          <h3 class="font-bold text-lg flex items-center">
            <i class="fa fa-map-marker text-red-500 mr-2"></i>
            <span id="location-name">泉州市图书馆</span>
          </h3>
          <button class="text-gray-400 hover:text-gray-600" id="close-info">
            <i class="fa fa-times"></i>
          </button>
        </div>
        
        <div class="p-4">
          <div class="flex items-start space-x-4">
            <img src="https://picsum.photos/id/1031/120/90" alt="图书馆外观" class="rounded-md w-32 h-24 object-cover" id="location-image">
            <div class="flex-1">
              <div class="flex items-center text-sm text-gray-600 mb-1">
                <i class="fa fa-clock-o mr-1"></i>
                <span id="location-open-time">开放时间: 09:00 - 21:00</span>
              </div>
              <div class="flex items-center text-sm text-gray-600 mb-1">
                <i class="fa fa-book mr-1"></i>
                <span id="location-books">藏书量: 150万册</span>
              </div>
              <div class="flex items-center text-sm text-gray-600 mb-1">
                <i class="fa fa-users mr-1"></i>
                <span id="location-people">当前人数: 156人 (适中)</span>
              </div>
              <div class="flex items-center text-sm text-gray-600">
                <i class="fa fa-star text-yellow-400 mr-1"></i>
                <span id="location-rating">评分: 4.7 (320人评价)</span>
              </div>
            </div>
          </div>
          
          <div class="mt-4">
            <h4 class="font-medium mb-2">服务设施</h4>
            <div class="flex flex-wrap gap-2" id="location-facilities">
              <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">自习区</span>
              <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">电子资源</span>
              <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">儿童专区</span>
              <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">咖啡厅</span>
              <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">无障碍设施</span>
            </div>
          </div>
          
          <div class="mt-4 flex space-x-3">
            <button class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded transition-colors duration-200 flex items-center justify-center">
              <i class="fa fa-directions mr-2"></i>导航
            </button>
            <button class="flex-1 bg-white border border-primary text-primary hover:bg-primary/5 font-medium py-2 px-4 rounded transition-colors duration-200 flex items-center justify-center">
              <i class="fa fa-info-circle mr-2"></i>详情
            </button>
          </div>
        </div>
      </div>
    </section>
  </main>

  <script>
    // 侧边栏切换
    const toggleSidebar = document.getElementById('toggle-sidebar');
    const sidebar = document.getElementById('sidebar');
    
    toggleSidebar.addEventListener('click', () => {
      if (window.innerWidth < 768) {
        sidebar.classList.toggle('-translate-x-full');
      } else {
        sidebar.classList.toggle('hidden');
        sidebar.classList.toggle('w-80');
      }
    });
    
    // 关闭信息卡片
    const closeInfo = document.getElementById('close-info');
    const locationInfo = document.getElementById('location-info');
    
    closeInfo.addEventListener('click', () => {
      locationInfo.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        locationInfo.classList.add('hidden');
      }, 300);
    });
    
    // 初始化地图
    document.addEventListener('DOMContentLoaded', function() {
      // 使用泉州市作为中心点
      const centerLocation = new BMap.Point(118.585, 24.905);
      
      // 创建地图实例
      const map = new BMap.Map("map");
      map.centerAndZoom(centerLocation, 13);
      map.enableScrollWheelZoom(); // 启用滚轮放大缩小
      map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
      map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件
      
      // 自定义图书馆图标
      const libraryIcon = new BMap.Icon('', new BMap.Size(24, 24), {anchor: new BMap.Size(12, 24)});
      
      // 泉州市部分知名图书馆数据
      const libraryLocations = [
        { name: "泉州市图书馆", lng: 118.6104, lat: 24.9065, books: 150, openTime: "09:00 - 21:00", people: 156, rating: 4.7, facilities: ["自习区", "电子资源", "儿童专区", "咖啡厅", "无障碍设施"] },
        { name: "鲤城区图书馆", lng: 118.5974, lat: 24.8887, books: 60, openTime: "08:30 - 20:30", people: 78, rating: 4.5, facilities: ["自习区", "电子资源", "儿童专区"] },
        { name: "丰泽区图书馆", lng: 118.5974, lat: 24.9287, books: 75, openTime: "09:00 - 21:30", people: 92, rating: 4.6, facilities: ["自习区", "电子资源", "无障碍设施"] },
        { name: "洛江区图书馆", lng: 118.6474, lat: 24.9687, books: 45, openTime: "08:30 - 20:00", people: 56, rating: 4.4, facilities: ["自习区", "电子资源"] },
        { name: "晋江市图书馆", lng: 118.5574, lat: 24.7887, books: 120, openTime: "09:00 - 22:00", people: 124, rating: 4.8, facilities: ["自习区", "电子资源", "儿童专区", "咖啡厅"] }
      ];
      
      // 添加图书馆标记点
      libraryLocations.forEach(location => {
        const point = new BMap.Point(location.lng, location.lat);
        const marker = new BMap.Marker(point, {icon: libraryIcon});
        map.addOverlay(marker);
        
        // 添加点击事件
        marker.addEventListener('click', function() {
          // 显示信息卡片
          locationInfo.classList.remove('hidden');
          setTimeout(() => {
            locationInfo.classList.remove('scale-95', 'opacity-0');
          }, 10);
          
          // 更新卡片内容
          document.getElementById('location-name').textContent = location.name;
          document.getElementById('location-image').src = `https://picsum.photos/id/${1030 + libraryLocations.indexOf(location)}/120/90`;
          document.getElementById('location-open-time').textContent = `开放时间: ${location.openTime}`;
          document.getElementById('location-books').textContent = `藏书量: ${location.books}万册`;
          
          let peopleStatus = '适中';
          if (location.people < 50) peopleStatus = '较少';
          else if (location.people > 100) peopleStatus = '较多';
          
          document.getElementById('location-people').textContent = `当前人数: ${location.people}人 (${peopleStatus})`;
          document.getElementById('location-rating').textContent = `评分: ${location.rating} (${Math.floor(Math.random() * 200 + 100)}人评价)`;
          
          // 更新设施标签
          const facilitiesContainer = document.getElementById('location-facilities');
          facilitiesContainer.innerHTML = '';
          location.facilities.forEach(facility => {
            const span = document.createElement('span');
            span.className = 'bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full';
            span.textContent = facility;
            facilitiesContainer.appendChild(span);
          });
        });
      });
      
      // 窗口大小变化时处理侧边栏
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          sidebar.classList.remove('-translate-x-full');
        }
      });
    });
  </script>
</body>
</html>    